import React from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import {
  Card,
  Button,
  Row,
  Col,
  Space,
  Form,
  Checkbox,
  message,
  Tabs,
  Select,
  DatePicker,
  Input,
  Radio,
  InputNumber,
  Table,
  Popconfirm,
  Menu,
  Dropdown,
  Modal,
  Badge,
  Tag,
} from 'antd';
import {
  PlusOutlined,
  PrinterOutlined,
  SyncOutlined,
  DownOutlined,
  RightOutlined,
  CloseOutlined,
  ExclamationCircleOutlined,
} from '@ant-design/icons';
import { connect } from 'umi';
import moment from 'moment';
import CateSelect from '@/components/CategoryComponent';
import PartSelect from '@/components/PartSelect';
import PoSelect from '@/components/PoSelect';
import { VendorSelect, EmpSelect } from '@/components/FormItemSelect';
import ItemSelect from '@/components/ItemSelect';
import TempletePO from '../PrintTemplete/TempletePO';
import request from '@/utils/request';
import PrintModal from '@/components/PrintModal';

const { TabPane } = Tabs;
const { confirm } = Modal;
const apiURL = '/api/services/app/POHeader/';
const apiURLPODetail = '/api/services/app/PODetail/';
const apiURLPORel = '/api/services/app/PORel/';
const apiURLVendor = '/api/services/app/Vendor/';
const apiURLVendorPart = '/api/services/app/VendPart/';
class ViewPage extends React.Component<any, any> {
  constructor(props: any) {
    super(props);
    this.state = {
      loading: false,
      visible: false,
      data: { poNum: 0 },
      poDetail: { poLine: 0 },
      poRel: {},
      dataSource: [],
      dataSource2: [],
      defTab: '1',
    };
  }
  printArea: any = React.createRef();
  formRef: any = React.createRef();
  componentDidMount() { }
  onFinishFailed = (errorInfo: any) => {
    let poErr = 0;
    let poDtlErr = 0;
    let poRelErr = 0;
    errorInfo.errorFields.forEach((element: any) => {
      if (element.name[0] == 'POHeader') {
        poErr++;
      }
      else if (element.name[0] == 'PODetail') {
        poDtlErr++;
      }
      else if (element.name[0] == 'PORel') {
        poRelErr++;
      }
      this.setState({ poErr, poDtlErr, poRelErr })
    });
  };
  onFinish = (values: any) => {
    values.POHeader.promiseDate = values.POHeader.promiseDate?.format('YYYY-MM-DD');
    request(apiURL + 'Update', {
      method: 'PUT',
      data: values.POHeader,
    }).then((response) => {
      if (response) {
        if (response.success) {
          message.success('保存成功！');
        }
        this.setState({ loading: false });
      }
    });

    if (values.PODetail) {
      values.PODetail.TaxCode = values.POHeader.userChar1;
      request(apiURLPODetail + 'Modify', {
        method: 'POST',
        data: [values.PODetail],
      }).then((response) => {
        if (response) {
          if (response.success) {
            message.success('分录保存成功！');
          } else {
            message.error(response.error.message);
          }
          this.setState({ loading: false });
        }
      });
    }

    if (values.PORel) {
      values.PORel.ium = values.PODetail.ium;
      values.PORel.dueDate = values.PORel.dueDate?.format('YYYY-MM-DD');
      values.PORel.promiseDt = values.PORel.promiseDt?.format('YYYY-MM-DD');
      request(apiURLPORel + 'Modify', {
        method: 'POST',
        data: [values.PORel],
      }).then((response) => {
        if (response) {
          if (response.success) {
            message.success('收货行保存成功！');
          } else {
            message.error(response.error.message);
          }
          this.setState({ loading: false });
        }
      });
    }
    this.setState({ poErr: 0, poDtlErr: 0, poRelErr: 0 })
  };
  getPO = (e?: any) => {
    if (e.poNum) {
      this.setState({ loading: true });
      request(apiURL + 'GetByNum', {
        method: 'GET',
        params: { num: e.poNum },
      }).then((response) => {
        if (response) {
          if (response.success) {
            if (response.result.success) {
              var POHeader = response.result.data;
              if (POHeader.promiseDate) POHeader.promiseDate = moment(POHeader.promiseDate);
              this.setState({ data: POHeader });
              this.formRef.current.setFieldsValue({ POHeader });
              if (POHeader.items) this.getPODetail(POHeader.items);
            } else {
              message.error(response.result.message);
            }
          } else {
            message.error(response.error.message);
          }
          this.setState({ loading: false });
        }
      });
    }
  };
  getPODetail = (data: any) => {
    var dataDtl = data[0];
    if (dataDtl) {
      this.setState({ dataSource: data, poDetail: dataDtl });
      this.formRef.current.setFieldsValue({ PODetail: dataDtl });
      if (dataDtl.items) this.getPORel(dataDtl.items);
    }
  };
  getPORel = (data: any) => {
    var dataRel = data[0];
    this.setState({ dataSource2: data, poRel: dataRel });
    if (dataRel) {
      if (dataRel.dueDate) dataRel.dueDate = moment(dataRel.dueDate);
      if (dataRel.promiseDt) dataRel.promiseDt = moment(dataRel.promiseDt);
      this.setState({ tranType: dataRel.tranType });
    }
    this.formRef.current.setFieldsValue({ PORel: dataRel });
  };
  newPO = () => {
    const { currentUser } = this.props;
    var value = {
      approvalStatus: 'U',
      poType: 'ipo',
      buyerID: '0',
      termsCode: '0',
      entryPerson: currentUser.userName,
      shipViaCode: '0',
      currencyCode: '0',
    };
    request(apiURL + 'New', {
      method: 'POST',
      data: value,
    }).then((response) => {
      if (response) {
        if (response.success) {
          message.success('新建订单成功！');
          var POHeader = response.result.data;
          this.setState({ data: POHeader });
          this.formRef.current.setFieldsValue({ POHeader });
        } else {
          message.error(response.error.message);
        }
        this.setState({ loading: false });
      }
    });
  };
  newPODetail = () => {
    const { data } = this.state;
    if (data.poNum == 0) {
      message.warning('请先创建采购订单');
      return;
    }
    var value = {
      poNum: data.poNum,
      partNum: '0',
      lineDesc: '0',
      ium: 'PCS',
      uom: '0',
      classID: '0',
      revisionNum: 'A',
    };
    request(apiURLPODetail + 'New', {
      method: 'POST',
      data: value,
    }).then((response) => {
      if (response) {
        this.setState({ loading: true });
        if (response.success) {
          var data = response.result.data;
          this.formRef.current.setFieldsValue({ PODetail: data });
          this.setState({ poDetail: data, defTab: '2' });
        } else {
          message.error(response.error.message);
        }
        this.setState({ loading: false });
      }
    });
  };
  newPORel = () => {
    const { data, poDetail } = this.state;
    if (data.poNum == 0) {
      message.warning('请先创建采购订单');
      return;
    }
    if (poDetail.poLine == 0) {
      message.warning('请先创建采购分录');
      return;
    }
    var value = {
      poNum: data.poNum,
      poLine: poDetail.poLine,
      warehouseCode: '',
      promiseDt: data.promiseDate,
      dueDate: data.promiseDate,
      tranType: 'PUR-STK',
    };
    request(apiURLPORel + 'New', {
      method: 'POST',
      data: value,
    }).then((response) => {
      if (response) {
        this.setState({ loading: true });
        if (response.success) {
          var data = response.result.data;
          if (data.promiseDt) data.promiseDt = moment(data.promiseDt);
          if (data.dueDate) data.dueDate = moment(data.dueDate);
          this.formRef.current.setFieldsValue({ PORel: data });
          this.setState({ defTab: '3' });
        } else {
          message.error(response.error.message);
        }
        this.setState({ loading: false });
      }
    });
  };
  setPODetail = (row: any) => {
    this.setState({ poDetail: row, defTab: '2' });
    this.formRef.current.setFieldsValue({ PODetail: row });
    this.getPORel(row.items);
  };
  setPORel = (row: any) => {
    this.setState({ poRel: row, defTab: '3' });
    if (row.promiseDt) row.promiseDt = moment(row.promiseDt);
    if (row.dueDate) row.dueDate = moment(row.dueDate);
    this.formRef.current.setFieldsValue({ PORel: row });
  };
  delObj = () => {
    const { data } = this.state;
    let _this = this;
    confirm({
      title: '警告',
      icon: <ExclamationCircleOutlined />,
      content: '删除后将不可恢复，确定删除？',
      onOk() {
        if (data.items != null && data.items.length > 0) {
          message.error('含有分录项，不能删除！');
          return;
        }
        request(apiURL + 'Delete', {
          method: 'DELETE',
          params: { id: data.id },
        }).then((response) => {
          if (response) {
            if (response.success) {
              _this.formRef.current.resetFields();
            } else {
              message.error(response.error.message);
            }
          }
        });
      },
    });
  };
  delPoD = (record: any) => {
    if (record.items != null && record.items.length > 0) {
      message.error('含有收货行，不能删除！');
      return;
    }
    const { data, dataSource } = this.state;
    request(apiURLPODetail + 'Delete', {
      method: 'DELETE',
      params: { id: record.id },
    }).then((response) => {
      if (response) {
        if (response.success) {
          let lists = dataSource.filter((o: any) => o.id != record.id);
          this.setState({ dataSource: lists });
          this.getPO(data)
        } else {
          message.error(response.error.message);
        }
      }
    });
  };
  delPoR = (id: any) => {
    const { data, dataSource2 } = this.state;
    request(apiURLPORel + 'Delete', {
      method: 'DELETE',
      params: { id },
    }).then((response) => {
      if (response) {
        if (response.success) {
          let lists = dataSource2.filter((o: any) => o.id != id);
          this.setState({ dataSource2: lists });
          this.getPO(data)
        } else {
          message.error(response.error.message);
        }
      }
    });
  };
  delPatchD = () => {
    const { selectedRowKeys, dataSource } = this.state;
    let _this = this;
    confirm({
      title: '警告',
      icon: <ExclamationCircleOutlined />,
      content: '删除后将不可恢复，确定删除？',
      onOk() {
        _this.props
          .dispatch({
            type: 'Abp/delPatch',
            payload: selectedRowKeys,
            control: 'PODetail',
          })
          .then(() => {
            let lists = dataSource.filter((o: any) => selectedRowKeys.indexOf(o.id) < 0);
            _this.setState({ dataSource: lists });
          });
      },
    });
  };
  delPatchR = () => {
    const { selectedRowKeys2, dataSource2 } = this.state;
    let _this = this;
    confirm({
      title: '警告',
      icon: <ExclamationCircleOutlined />,
      content: '删除后将不可恢复，确定删除？',
      onOk() {
        _this.props
          .dispatch({
            type: 'Abp/delPatch',
            payload: selectedRowKeys2,
            control: 'PORel',
          })
          .then(() => {
            let lists = dataSource2.filter((o: any) => selectedRowKeys2.indexOf(o.id) < 0);
            _this.setState({ dataSource2: lists });
          });
      },
    });
  };
  handleMenuClick = (e: any) => {
    if (e.key === '1') {
      this.newPO();
      this.formRef.current.resetFields();
      this.setState({ poErr: 0, poDtlErr: 0, poRelErr: 0, dataSource: [], dataSource2: [] })
    } else if (e.key === '2') {
      this.newPODetail();
    } else {
      this.newPORel();
    }
  };
  tabSwitch = (key: any) => {
    this.setState({ defTab: key });
  };
  setCurrent = (part?: any) => {
    if (part) {
      var PODetail: any = {};
      PODetail.partNum = part.partNum;
      PODetail.lineDesc = part.partDescription;
      PODetail.ium = part.ium;
      var datas = this.formRef.current.getFieldsValue();
      request(apiURLVendorPart + 'GetList', {
        method: 'GET',
        params: { vendorNum: datas.POHeader.vendorNum, partNum: part.partNum, effe: 1 },
      }).then((response) => {
        if (response && response.result) {
          var item = response.result.items[0];
          if (item) {
            PODetail.unitCost = item?.baseUnitPrice;
            this.formRef.current.setFieldsValue({ PODetail });
            this.setState({ partRevs: part.revs });
          } else {
            message.warning("供应商暂无报价！");
          }
        }
        else {
          message.warning("供应商暂无报价！");
        }
      })
    }
    this.setState({ visible2: false });
  };
  onSelectChange = (selectedRowKeys: any) => {
    this.setState({ selectedRowKeys });
  };
  onSelectChange2 = (selectedRowKeys2: any) => {
    this.setState({ selectedRowKeys2 });
  };
  setPORelJob = (item: any) => {
    let PORel = {
      jobNum: item.jobNum,
      jobSeq: item.jobSeq,
      assemblySeq: item.assemblySeq,
      relQty: item.requiredQty,
      ium: item.ium,
    };
    this.formRef.current.setFieldsValue({ PORel });
  };
  sendApprv = (e: any) => {
    const { data } = this.state
    if (!data || !data.id) {
      message.warning('请打开采购单');
      return;
    }
    request(apiURL + 'AppApprv', {
      method: 'POST',
      data: [data.id],
    }).then((response) => {
      if (response && response.success) {
        message.success('提交成功');
        this.getPO(data);
      }
    });
  }
  doPrint = () => {
    this.setState({ visible: true })
  };
  setVendor = (e: any) => {
    request(apiURLVendor + 'GetByNum', {
      method: 'GET',
      params: { num: e },
    }).then((response) => {
      if (response && response.success) {
        var data = response.result.data;
        var POHeader = {
          termsCode: data.termsCode,
          currencyCode: data.currencyCode,
          userChar1: data.taxRegionCode
        }
        this.setState({ taxRegionCode: data.taxRegionCode, vendorNum: data.vendorNum });
        this.formRef.current.setFieldsValue({ POHeader });
      }
    });
  }
  render() {
    const { data, dataSource, dataSource2, defTab, selectedRowKeys, selectedRowKeys2, tranType, poErr, poDtlErr, poRelErr, taxRegionCode } =
      this.state;
    const layout = {
      labelCol: { span: 5 },
      wrapperCol: { span: 19 },
    };
    const columns = [
      {
        title: '项目',
        dataIndex: 'poLine',
        key: 'poLine',
        width: 60,
      },
      {
        title: '未结',
        dataIndex: 'openLine',
        key: 'openLine',
        width: 60,
        render: (text: boolean) => <Checkbox checked={text} />,
      },
      {
        title: '物料编码',
        dataIndex: 'partNum',
        key: 'partNum',
        width: 100,
      },
      {
        title: '描述',
        dataIndex: 'lineDesc',
        key: 'lineDesc',
        ellipsis: true
      },
      {
        title: '数量',
        dataIndex: 'orderQty',
        key: 'orderQty',
        width: 60,
      },
      {
        title: '单价',
        dataIndex: 'unitCost',
        key: 'unitCost',
        width: 60,
      },
      {
        title: '操作',
        width: 60,
        render: (record: any) =>
          dataSource.length >= 1 ? (
            <Popconfirm title="确定删除?" onConfirm={() => this.delPoD(record)}>
              <a>删除</a>
            </Popconfirm>
          ) : null,
      },
    ];
    const columnRel = [
      {
        title: '项目',
        dataIndex: 'poRelNum',
        key: 'PORelNum',
      },
      {
        title: '未结',
        dataIndex: 'openRelease',
        render: (text: boolean) => <Checkbox checked={text} />,
      },
      {
        title: '采购类型',
        dataIndex: 'tranType',
        key: 'tranType',
      },
      {
        title: '采购数量',
        dataIndex: 'relQty',
        key: 'relQty',
      },
      {
        title: '承诺日期',
        dataIndex: 'promiseDt',
        key: 'promiseDt',
        render: (text: any) => <span>{moment(text).format('YYYY-MM-DD')}</span>,
      },
      {
        title: '到期日',
        dataIndex: 'dueDate',
        key: 'dueDate',
        render: (text: any) => <span>{moment(text).format('YYYY-MM-DD')}</span>,
      },
      {
        title: '操作',
        render: (record: any) =>
          dataSource2.length >= 1 ? (
            <Popconfirm title="确定删除?" onConfirm={() => this.delPoR(record.id)}>
              <a>删除</a>
            </Popconfirm>
          ) : null,
      },
    ];
    const columnJobItem = [
      {
        title: '工单号',
        dataIndex: 'jobNum',
      },
      {
        title: '半成品号',
        dataIndex: 'assemblySeq',
      },
      {
        title: '物料号',
        dataIndex: 'jobSeq',
      },
      {
        title: '物料编码',
        dataIndex: 'partNum',
      },
      {
        title: '描述',
        dataIndex: 'partDescription',
      },
      {
        title: '需求量',
        dataIndex: 'requiredQty',
      },
      {
        title: '单位',
        dataIndex: 'ium',
      },
    ];
    const columnOrderRel = [
      {
        title: '订单号',
        dataIndex: 'orderNum',
      },
      {
        title: '分录',
        dataIndex: 'orderLine',
      },
      {
        title: '发货行',
        dataIndex: 'orderRelNum',
      },
      {
        title: '物料编码',
        dataIndex: 'partNum',
      },
      {
        title: '描述',
        dataIndex: 'lineDesc',
      },
      {
        title: '需求量',
        dataIndex: 'ourReqQty',
      },
      {
        title: '单位',
        dataIndex: 'ium',
      },
    ];
    const selectRev = (
      <Select placeholder="选择版本">
        {this.state.partRevs?.map((item: any) => {
          return (
            <Select.Option key={item} value={item}>
              {item}
            </Select.Option>
          );
        })}
      </Select>
    );
    const rowSelection = {
      selectedRowKeys,
      onChange: this.onSelectChange,
    };
    const rowSelection2 = {
      selectedRowKeys2,
      onChange: this.onSelectChange2,
    };
    const myTag = (status: string) => {
      if (status === "A")
        return <Tag color="#87d068">已核准</Tag>
      else if (status === "R")
        return <Tag color="#f50">已拒绝</Tag>
      else if (status === "P")
        return <Tag color="#2db7f5">已提交</Tag>
      else
        return <Tag>未提交</Tag>
    }
    const disabled = data.approvalStatus == "A" || data.approvalStatus == "P" || data == null || data.poNum == 0
    return (
      <PageHeaderWrapper>
        <Form {...layout} ref={this.formRef} onFinish={this.onFinish} onFinishFailed={this.onFinishFailed}>
          <Space style={{ marginBottom: 8 }}>
            <Dropdown
              overlay={
                <Menu onClick={this.handleMenuClick}>
                  <Menu.Item key="1" icon={<RightOutlined />}>
                    新建订单
                  </Menu.Item>
                  <Menu.Item key="2" icon={<RightOutlined />}>
                    新建分录
                  </Menu.Item>
                  <Menu.Item key="3" icon={<RightOutlined />}>
                    新建收货行
                  </Menu.Item>
                </Menu>
              }
            >
              <Button type="primary" icon={<PlusOutlined />}>
                新增 <DownOutlined />
              </Button>
            </Dropdown>
            <Button type="primary" htmlType="submit" disabled={disabled}>
              保存
            </Button>
            <Button type="primary" icon={<SyncOutlined />} onClick={() => this.getPO(data)}>
              刷新
            </Button>
            <Button danger icon={<CloseOutlined />} onClick={() => this.delObj()} disabled={disabled}>
              删除
            </Button>
            <Button type="ghost" icon={<PrinterOutlined />} onClick={this.doPrint}>
              打印
            </Button>
          </Space>
          <Row gutter={[16, 16]}>
            <Col xs={24} sm={24} md={24} lg={12} xl={12}>
              <Card>
                <Tabs defaultActiveKey={defTab} activeKey={defTab} onChange={this.tabSwitch}>
                  <TabPane tab={<Badge count={poErr}>汇总</Badge>} key="1">
                    <Form.Item name={['POHeader', 'id']} label="ID" hidden>
                      <Input disabled />
                    </Form.Item>
                    <Form.Item label="采购单号" style={{ marginBottom: 0 }}>
                      <Input.Group compact>
                        <PoSelect
                          width={144}
                          noStyle
                          name={['POHeader', 'poNum']}
                          rules={[{ required: true, message: '请输入采购单号' }]}
                          setCurrent={this.getPO}
                        />
                        <Form.Item
                          name={['POHeader', 'approve']}
                          valuePropName="checked"
                          style={{ marginLeft: 20 }}
                        >
                          <Checkbox disabled>已核准</Checkbox>
                        </Form.Item>
                        <Form.Item>
                          <Checkbox checked={data.approvalStatus == "P"} onChange={this.sendApprv} disabled={disabled}>提交核准</Checkbox>
                          {myTag(data.approvalStatus)}
                        </Form.Item>
                      </Input.Group>
                    </Form.Item>
                    <Form.Item
                      name={['POHeader', 'promiseDate']}
                      label="承诺日期"
                      rules={[{ required: true, message: '请选择承诺日期' }]}
                    >
                      <DatePicker />
                    </Form.Item>
                    <Form.Item
                      name={['POHeader', 'poType']}
                      label="采购类型"
                      rules={[{ required: true, message: '请选择采购类型' }]}
                    >
                      <Select style={{ width: 200 }}>
                        <Select.Option value="ipo">国内采购</Select.Option>
                        <Select.Option value="opo">海外采购</Select.Option>
                      </Select>
                    </Form.Item>

                    <EmpSelect
                      required={true}
                      width={200}
                      name={['POHeader', 'buyerID']}
                      label="采购员"
                    />
                    <VendorSelect
                      required={true}
                      showSearch={true}
                      width={280}
                      name={['POHeader', 'vendorNum']}
                      label="供应商"
                      setCurrent={this.setVendor}
                    />
                    <CateSelect
                      layout="Terms"
                      width={200}
                      name={['POHeader', 'termsCode']}
                      label="付款条款"
                    />
                    <CateSelect
                      layout="ShipVia"
                      width={200}
                      name={['POHeader', 'shipViaCode']}
                      label="运输方式"
                    />
                    <CateSelect
                      layout="Currency"
                      width={200}
                      name={['POHeader', 'currencyCode']}
                      label="货币"
                    />
                    <Form.Item
                      name={['POHeader', 'entryPerson']}
                      rules={[{ required: true, message: '请输入采购编号' }]}
                      label="录入人员"
                    >
                      <Input style={{ width: 120 }} />
                    </Form.Item>
                    <Form.Item
                      name={['POHeader', 'userChar1']}
                      label="税率"
                      hidden
                    >
                      <Input />
                    </Form.Item>
                  </TabPane>
                  <TabPane tab={<Badge count={poDtlErr}>分录</Badge>} key="2">
                    <Form.Item hidden name={['PODetail', 'id']} label="ID">
                      <Input disabled />
                    </Form.Item>
                    <Form.Item hidden name={['PODetail', 'poNum']} label="ID">
                      <Input disabled />
                    </Form.Item>
                    <Form.Item name={['PODetail', 'poLine']} label="分录">
                      <InputNumber readOnly disabled />
                    </Form.Item>
                    <Form.Item label="物料编码">
                      <Input.Group compact>
                        <PartSelect
                          name={['PODetail', 'partNum']}
                          noStyle
                          width={200}
                          required={true}
                          placeholder="物料编码"
                          setCurrent={this.setCurrent}
                        />
                        <Form.Item name={['PODetail', 'ium']} noStyle>
                          <Input style={{ width: 80 }} placeholder="单位" disabled />
                        </Form.Item>
                        <Form.Item name={['PODetail', 'revisionNum']} noStyle>
                          {selectRev}
                        </Form.Item>
                      </Input.Group>
                    </Form.Item>
                    <Form.Item name={['PODetail', 'lineDesc']} label="物料描述">
                      <Input.TextArea readOnly disabled />
                    </Form.Item>
                    <Form.Item
                      name={['PODetail', 'unitCost']}
                      label="含税单价"
                      rules={[{ required: true, message: '请输入含税单价' }]}
                    >
                      <Input prefix="￥" style={{ width: 200 }} />
                    </Form.Item>
                    <Form.Item
                      name={['PODetail', 'tax']}
                      label="税额"
                    >
                      <Input prefix="￥" style={{ width: 200 }} disabled />
                    </Form.Item>
                    <Form.Item
                      name={['PODetail', 'orderQty']}
                      label="数量"
                      rules={[{ required: true, message: '请输入数量' }]}
                    >
                      <InputNumber min={0} disabled />
                    </Form.Item>
                    <Form.Item wrapperCol={{ offset: 5 }}>
                      <Input.Group compact>
                        <Form.Item name={['PODetail', 'taxable']} valuePropName="checked">
                          <Checkbox>可征税</Checkbox>
                        </Form.Item>
                        <Form.Item name={['PODetail', 'openLine']} valuePropName="checked">
                          <Checkbox>未结</Checkbox>
                        </Form.Item>
                      </Input.Group>
                    </Form.Item>
                  </TabPane>
                  <TabPane tab={<Badge count={poRelErr}>收货</Badge>} key="3">
                    <Form.Item hidden name={['PORel', 'id']}>
                      <Input />
                    </Form.Item>
                    <Form.Item hidden name={['PORel', 'poNum']}>
                      <Input />
                    </Form.Item>
                    <Form.Item hidden name={['PORel', 'poLine']}>
                      <Input />
                    </Form.Item>
                    <Form.Item name={['PORel', 'poRelNum']} label="收货行">
                      <InputNumber disabled />
                    </Form.Item>
                    <Form.Item
                      name={['PORel', 'promiseDt']}
                      label="承诺日期"
                      rules={[{ required: true, message: '请选择承诺日期' }]}
                    >
                      <DatePicker />
                    </Form.Item>
                    <Form.Item
                      name={['PORel', 'dueDate']}
                      label="到日期"
                      rules={[{ required: true, message: '请选择到日期' }]}
                    >
                      <DatePicker />
                    </Form.Item>
                    <Form.Item
                      name={['PORel', 'tranType']}
                      label="采购类型"
                      rules={[{ required: true, message: '请选择采购类型' }]}
                    >
                      <Radio.Group
                        name="radiogroup"
                        onChange={(e: any) => this.setState({ tranType: e.target.value })}
                      >
                        <Radio value="PUR_STK">库存采购</Radio>
                        <Radio value="PUR_MTL">工单采购</Radio>
                        <Radio value="PUR_SUB">外协加工</Radio>
                        <Radio value="PUR_SO">订单采购</Radio>
                        <Radio value="PUR_UKN">其它采购</Radio>
                      </Radio.Group>
                    </Form.Item>
                    <Form.Item label="关联工单" hidden={tranType != 'PUR_MTL'}>
                      <Input.Group compact>
                        <Form.Item name={['PORel', 'jobNum']} noStyle>
                          <Input style={{ width: 100 }} />
                        </Form.Item>
                        <Form.Item name={['PORel', 'assemblySeq']} noStyle>
                          <Select placeholder="半成品"> </Select>
                        </Form.Item>
                        <Form.Item name={['PORel', 'jobSeq']} noStyle>
                          <Select placeholder="物料号"> </Select>
                        </Form.Item>
                        <Form.Item noStyle>
                          <ItemSelect
                            width={780}
                            control="JobHead"
                            columns={columnJobItem}
                            text="选择"
                            title="工单物料"
                            act="getItems"
                            setCurrent={this.setPORelJob}
                          />
                        </Form.Item>
                      </Input.Group>
                    </Form.Item>
                    <Form.Item label="销售订单" hidden={tranType != 'PUR_SO'}>
                      <Input.Group compact>
                        <Form.Item name={['PORel', 'orderNum']} noStyle>
                          <Input style={{ width: 100 }} />
                        </Form.Item>
                        <Form.Item name={['PORel', 'orderLine']} noStyle>
                          <Select placeholder="销售分录"> </Select>
                        </Form.Item>
                        <Form.Item name={['PORel', 'orderRelNum']} noStyle>
                          <Select placeholder="发货行"> </Select>
                        </Form.Item>
                        <Form.Item noStyle>
                          <ItemSelect
                            width={780}
                            control="OrderHed"
                            columns={columnOrderRel}
                            text="选择"
                            title="销售订单"
                            act="getItems"
                            setCurrent={this.setPORelJob}
                          />
                        </Form.Item>
                      </Input.Group>
                    </Form.Item>
                    <Form.Item label="采购数量">
                      <Input.Group compact>
                        <Form.Item
                          noStyle
                          name={['PORel', 'relQty']}
                          rules={[{ required: true, message: '采购数量必填' }]}
                        >
                          <InputNumber min={0} />
                        </Form.Item>
                        <Form.Item noStyle name={['PORel', 'ium']}>
                          <Input style={{ width: 50 }} placeholder="IUM" />
                        </Form.Item>
                      </Input.Group>
                    </Form.Item>
                    <Form.Item label="总账科目">
                      <Input.Group compact>
                        <Form.Item name={['PORel', 'GLAccount']}>
                          <Input style={{ width: 100 }} />
                        </Form.Item>
                        <Form.Item name={['PORel', 'GLAccountDesc']}>
                          <Input style={{ width: 200 }} placeholder="总账科目描述" />
                        </Form.Item>
                        <Form.Item name={['PORel', 'openRelease']} valuePropName="checked">
                          <Checkbox>未结</Checkbox>
                        </Form.Item>
                      </Input.Group>
                    </Form.Item>
                  </TabPane>
                </Tabs>
              </Card>
            </Col>
            <Col xs={24} sm={24} md={24} lg={12} xl={12}>
              <Card>
                <Tabs defaultActiveKey="1">
                  <TabPane tab="分录项" key="1">
                    <Table
                      rowKey="id"
                      size="small"
                      columns={columns}
                      loading={this.state.loading}
                      dataSource={this.state.dataSource}
                      rowSelection={rowSelection}
                      onRow={(record) => {
                        return {
                          onDoubleClick: (event) => {
                            this.setPODetail(record);
                          },
                        };
                      }}
                    />
                    <Row gutter={16}>
                      <Col span={12}>
                        <Button
                          block
                          type="dashed"
                          icon={<PlusOutlined />}
                          onClick={this.newPODetail}
                        >
                          添加分录
                        </Button>
                      </Col>
                      <Col span={12}>
                        <Button block danger icon={<CloseOutlined />} onClick={this.delPatchD}>
                          删除分录
                        </Button>
                      </Col>
                    </Row>
                  </TabPane>
                  <TabPane tab="收货行" key="2">
                    <Table
                      rowKey="id"
                      size="small"
                      columns={columnRel}
                      loading={this.state.loading2}
                      dataSource={this.state.dataSource2}
                      rowSelection={rowSelection2}
                      onRow={(record) => {
                        return {
                          onDoubleClick: (event) => {
                            this.setPORel(record);
                          },
                        };
                      }}
                    />

                    <Row gutter={16}>
                      <Col span={12}>
                        <Button block type="dashed" icon={<PlusOutlined />} onClick={this.newPORel}>
                          添加收货行
                        </Button>
                      </Col>
                      <Col span={12}>
                        <Button block danger icon={<CloseOutlined />} onClick={this.delPatchR}>
                          删除收货行
                        </Button>
                      </Col>
                    </Row>
                  </TabPane>
                </Tabs>
              </Card>
            </Col>
          </Row>
        </Form>

        <Modal
          width={1024}
          title="采购单打印"
          visible={this.state.visible}
          destroyOnClose={true}
          onCancel={() => this.setState({ visible: false })}
          footer={false}
        >
          <PrintModal>
            <TempletePO data={data} configData={this.props.currentConfig} />
          </PrintModal>
        </Modal>
      </PageHeaderWrapper>
    );
  }
}
export default connect(({ Abp, user }: API.IConnectState) => ({
  response: Abp.response,
  currentUser: user.currentUser,
  currentConfig: user.currentConfig,
}))(ViewPage);
